<template>
    <div class="com_echarts">
        <div class="chart-title">
            <img src="../../../assets/images/screen/health_resource/FilletRectangle.png" alt="">
            <p>医疗住院率与就诊次数</p>
        </div>
        <div class=" carousel-box" >
            <el-carousel :interval="10000" arrow="always">
                <el-carousel-item key="1">
                    <div class="right_top_second_chart" id="right_top_second_chart_bar"></div>
                </el-carousel-item>
                <el-carousel-item  key="2">
                    <div class="right_top_second_chart" id="right_top_second_chart_line"></div>
                </el-carousel-item>
            </el-carousel>
         </div>
    </div>

</template>

<script>
import echarts from 'echarts';
import echartsrender from '../../../assets/js/jquery.echarts';
export default {
  name: 'right_top_second_chart_bar',
  data () {
    return {
        barId:"right_top_second_chart_bar",
        lineId:"right_top_second_chart_line"
    }
  },
  created () {

  },
  mounted(){
    this.initbar();
    this.initline();
  },
  methods:{
    initbar(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.barId));
        var cost = [6, 7, 5]
        var totalCost = [10, 10, 10]//比例综合
        var grade = ['合计', '城市', '农村']
        var data = {
            grade: grade,
            cost: cost,
            totalCost: totalCost
        };
        
        var option = {
            title: {
                top: '5%',
                left: 'center',
                text: '居民年平均就诊次数',
                textStyle: {
                    align: 'center',
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
                    label: {
                    show: true,
                    backgroundColor: '#333'
                    }
                }
            },
            grid: {
                top:'10%',
                bottom:'10%',
                left: '18%',
                right: '18%'
            },
            xAxis: {
                show: false,
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    show: true,
                    color: 'rgba(255,255,255,0.7)',
                    fontSize: 14
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: data.grade
            },
            series: [{
                type: 'bar',
                barGap: '-100%',
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        color: '#58ADE3',
                        fontSize: 14,
                        formatter: 
                        function(param) {
                            return data.cost[param.dataIndex] +'人次';
                        },
                    }
                },
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        // borderColor: '#4DCEF8',
                        // borderWidth: 2,
                    barBorderRadius: 20,
                        color: '#001A45'
                    },
                },
                z: 1,
                data: data.totalCost,
                // data: da
            }, {
                type: 'bar',
                barGap: '-98%',
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: '#00A0E8'
                    },
                },
                max: 1,
                label: {
                    normal: {
                        show: true,
                        position: 'left',
                        color: '#fff',
                        fontSize: 14,
                        formatter: function(param) {
                            return '';
                            
                        },
                    }
                },
                labelLine: {
                    show: true,
                },
                z: 2,
                data: data.cost,
            }]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    },
    initline(){
        let that = this;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(this.lineId));
        var args={
            title:'居民住院率',
            xAxisdata: ['2011年','2012年','2013年','2014年','2015年','2016年','2017年','2018年'],
            series:[{
                name: '住院率',
                type: 'line',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 1
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(137, 189, 27, 0.3)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(137, 189, 27, 0)'
                        }], false),
                        shadowColor: 'rgba(0, 0, 0, 0.1)',
                        shadowBlur: 10
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgb(137,189,27)'
                    }
                },
                data: [96.3,96.4,97.5,95.6,98.1,94.8,89.6,94.1]
            }]
        }
        var option = echartsrender.line(args);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
  }
}
</script>
<style lang='scss' rel="stylesheet/scss">
.medical_service .el-carousel__container {
    position: relative;
    height: 22vh;
}
.el-carousel__container .el-carousel__arrow--left{
    left: -5px;
}
.el-carousel__container .el-carousel__arrow--right{
    right: -5px;
}
.el-carousel__indicators .el-carousel__indicator{
    padding: 0px 4px;
}
</style>

<style lang='scss'  rel="stylesheet/scss" scoped>
.com_echarts{
    width:99%;
    height:100%;
    float: left;
}
.chart-title{
    img{
        float: left;
        width: 6px;
        height: auto;
        margin-left: 5px;
        margin-top: 5px;
    }
    p{
        font-size: 12px;
        color: #58ADE3;
        line-height: 2.5;
        margin-left: 15px;
    }
}
.right_top_second_chart,.carousel-box {
    width:99%;
    height:86%;
    float: left;
}
.el-carousel__item div {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    // line-height: 300px;
    margin: 0;
    height: 100%;
}
#right_top_second_chart_bar{
    width: 20vw;;
    position: relative;
    height: 22vh;
}
#right_top_second_chart_line{
    width: 20vw;;
    position: relative;
    height: 22vh;
}

</style>
